<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../css/mui.plus.css" rel="stylesheet"/>
    <style>
    	footer {
			position: fixed;
			width: 100%;
			height: 50px;
			min-height: 50px;
			border-top: solid 1px #bbb;
			left: 0px;
			bottom: 0px;
			overflow: hidden;
			padding-left: 10px;
			padding-right: 120px;
			background-color: #fafafa;
		}
		.footer-left {
			position: absolute;
			width: 50px;
			height: 50px;
			left: 0px;
			bottom: 0px;
			text-align: center;
			vertical-align: middle;
			line-height: 100%;
			padding: 12px 4px;
		}
		.footer-right {
			position: absolute;
			width: 120px;
			height: 50px;
			right: 0px;
			bottom: 0px;
			text-align: center;
			vertical-align: middle;
			line-height: 100%;
			padding: 12px 5px;
			display: inline-block;
		}
		.footer-right span {
			width: 45px;
		}
		.footer-center {
			height: 100%;
			padding: 8px 0px;
		}
		.footer-center [class*=input] {
			width: 100%;
			height: 100%;
			border-radius: 5px;
		}
		.footer-center .input-text {
			background: #fff;
			border: solid 1px #ddd;
			padding: 8px !important;
			font-size: 16px !important;
			line-height: 18px !important;
			font-family: verdana !important;
			overflow: hidden;
		}
		.footer-center .input-sound {
			background-color: #eee;
		}
		.mui-content {
			padding-bottom: 44px;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">资讯详情</h1>
	</header>
	<div class="mui-content" id="detail_wrap">
		<div style="width: 100%;">
			<img src="../../images/blank_page/loading.png" alt="相关图片" style="width: 100%;"/>
		</div>
		<!--<div class="oe-article">
			<div class="oe-spt">
				<div class="oe-spt-bar">
					<span class="mui-icon mui-icon-star"></span>
					<span class="spt-num">290</span>
					<span class="mui-icon mui-icon-chatbubble"></span>
					<span class="disc-num">124</span>
				</div>
			</div>
			<p class="oe-title-art">冻出来的关节炎系误读</p>
			<p class="oe-title-artsub">骨医快线&nbsp;&nbsp;&nbsp;2016.2.5</p>
			<p class="oe-article-main">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ducimus modi sint aspernatur dolorum libero possimus provident fugit. Ea accusantium dolores debitis quae possimus vitae necessitatibus placeat soluta id quo.
			</p>
		</div>-->
		<div class="oe-emp">
			<img src="../../images/blank_page/pub.png"/>
		</div>
	</div>
	<!--<div style="position: fixed; bottom:10px; right: 10px;">
		<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>	
	</div>-->
	
	<footer>
		<div class="footer-center">
			<textarea id='msg-text' type="text" class='input-text' placeholder="评论一下"></textarea>
		</div>
		<label for="" class="footer-right">
			<a id="icon-star"><span class="mui-icon mui-icon-star" style="color: #e88787;"></span></a>
			<a id="icon-chatbubble"><span class="mui-icon mui-icon-chatbubble" style="color: #30B497;"></span></a>	
		</label>
	</footer>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script type="text/javascript" charset="utf-8">
		(function($, doc){
			var id, ncolId, wv, cmtInfo = {ncom_dr_id: app.storage.getUserId()};
      		var page = app.page;
			
			var cmtNews = function(cmtInfo){
				app.net.post('news_comms/create.json', cmtInfo, function(data){
					if(data && data.code === '100'){
						$.toast('评论成功');
					};
				});
			}
      		
			function iconFillToggle(fillObj, CB){
				if(typeof fillObj !== 'object') return;
				var codId = fillObj.getAttribute("id");
				
				if(/active/.test(fillObj.classList)){
					fillObj.classList.remove('active');
					fillObj.children[0].classList.remove('mui-'+ codId+ '-filled');
					fillObj.children[0].classList.add('mui-'+ codId);
					return CB('active');
				}else {
					fillObj.classList.add('active');
					fillObj.children[0].classList.remove('mui-'+ codId);
					fillObj.children[0].classList.add('mui-'+ codId+ '-filled');
					return CB();
				}
			}
			
			$('footer').on('tap', '#icon-star', function(){
				if(!app.storage.getUserId()) return $.toast('请先登录哟');
				
				var self = this;
				iconFillToggle(self, function(isAct){
					if(isAct){
						if(!ncolId)return $.toast('您尚未收藏');
						page.deleteCollect({
							ncol_id: ncolId
						}, function(data){
							$.toast('取消收藏');
						});
					}else{
						page.addCollect({
							ncol_news_id: id,
							ncol_dr_id: app.storage.getUserId()
						}, function(data){
							ncolId = data.ncol_id;
							$.toast('收藏成功');
						});
					}
				});
			});
			
      		//底层支持准备完毕
      		$.plusReady(function(){
				plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
				wv = plus.webview.currentWebview();
				
				
				var	detailWrap = document.querySelector('#detail_wrap'),
					star = document.querySelector('#icon-star');
				
				
			  	//获得事件参数
			  	cmtInfo.ncom_news_id = wv.newsid;
				page.getSingleDetail({
					news_id: cmtInfo.ncom_news_id,
					dr_id: app.storage.getUserId()
				}, function(data){
					if(data.is_collect === true){
						var codId = star.getAttribute('id')
						
						star.classList.add('active');
						star.children[0].classList.remove('mui-'+ codId);
						star.children[0].classList.add('mui-'+ codId+ '-filled');
					}
					ncolId = data.ncol_id;
					id = data.news_id;
					detailWrap.innerHTML = 
						'<div style="width: 100%;"><img src="'+ data.news_first_img +'" alt="'+ data.news_title +'" style="width: 100%;"/>'+
						'</div><div class="oe-article"><p class="oe-title-art">'+ data.news_title +'</p>'+
						'<p class="oe-title-artsub">'+ data.news_author +'&nbsp;&nbsp;&nbsp;'+ data.news_post_time +'</p>'+
						'<p class="oe-article-main">'+ data.news_article +'</p></div>';
				});
					
				
				
				$('footer').on('tap', '#icon-chatbubble', function(){
					$.openWindow({
						url: 'comment-list.html',
						waiting: {
							autoShow: false
						},
						extras: {
							newsId: id
						}
					});
				});
				
				$('footer').on('change', '#msg-text', function(){
					if(this.value === '')return $.toast('评论内容不能为空');
					cmtInfo.ncom_text = this.value;
					cmtNews(cmtInfo);					
				});
				
      		});
      		
      	}(mui, document));
	</script>
</body>
</html>